<script setup>
import { ref, onMounted, computed, reactive, watch, nextTick } from "vue";
import TextListContent from "../TextListContent/index.vue";
import { Empty } from "ant-design-vue";
const TextListContentRef = ref(null);

const emit = defineEmits("changeItem");

const props = defineProps({
  // 是否展示头部 生成几篇文章的小标题
  showTitle: {
    type: Boolean,
    default: true,
  },
  // 搜后展示暂未生成的图片
  showEmpty: {
    type: Boolean,
    default: true,
  },
  // 是否展示列表中的换一篇
  showChangeItem: {
    type: Boolean,
    default: true,
  },
});

const list = computed(() => {
  if (Array.isArray(TextListContentRef.value?.list)) {
    return TextListContentRef.value.list;
  }
  return [];
});

const setList = (list) => {
  TextListContentRef.value.setList(list);
};

const changeItem = () => {
  emit("changeItem");
};

defineExpose({
  setList,
});
</script>

<template>
  <div class="TextList">
    <!-- 没有数据 + 开启展示 才展示 -->
    <template v-if="!list.length">
      <template v-if="!list.length && props.showEmpty">
        <div class="is_empty">
          <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />

          <p class="empty_text_one">您暂时还没生成文案哦!</p>
          <span class="empty_text_two"
            >输入相关设置项，可以帮您裂变出文案，快来使用吧!</span
          >
          <!-- <a-button type="primary" >新手指引</a-button> -->
        </div>
      </template>
      <template v-else>
        <div>
          <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
        </div>
      </template>
    </template>

    <TextListContent
      ref="TextListContentRef"
      v-show="!!list.length"
      :showTitle="props.showTitle"
      :showChangeItem="props.showChangeItem"
      @changeItem="changeItem"
    />
  </div>
</template>

<style lang="less" scoped>
.TextList {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .is_empty {
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 50%;
      object-fit: contain;
    }
    .empty_text_one {
      font-size: 16px;
      font-weight: 600;
    }
    .empty_text_two {
      font-size: 14px;
      color: #9ea5cc;
    }
  }
}
</style>
